<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购购物车</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 头栏部分 -->
    <div class="topBox">
        <div class="banxin">
            <div class="left">
                <p>品优购欢迎您!</p>
                <p><a href="#">请登录</a></p>
                <p class="denlu"><a href="#">免费注册</a></p>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li></li>
                    <li><a href="#">我的品优购 V</a></li>
                    <li></li>
                    <li><a href="#">品优购会员</a></li>
                    <li></li>
                    <li><a href="#">企业采购</a></li>
                    <li></li>
                    <li><a href="#">关注品优购 V</a></li>
                    <li></li>
                    <li><a href="#">客户服务 V</a></li>
                    <li></li>
                    <li><a href="#">网站导航 V</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部logo -->
    <div class="topLogo">
        <div class="banxin">
            <div class="boxLogo">
                <img src="./image/logo.png" alt="logo">
                <p>购物车</p>
            </div>
        </div>
    </div>
    <!-- 全部商品部分 -->
    <div class="allWares">
        <div class="banxin">
            <div class="boxWares">
                <div class="title">
                    <h3>全部商品</h3>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品选择部分 -->
    <div class="chackOut">
        <div class="banxin fu">
            <div class="outTitle">
                <div class="allBtn">
                    <input type="checkbox" name="" id="allone">
                    全选
                </div>
                <div class="wares">商品</div>
                <div class="onePrice">单价</div>
                <div class="num">数量</div>
                <div class="subTotal">小计</div>
                <div class="operation">操作</div>
            </div>
            <div class="waresChoice">
                <div class="oneBtn">
                    <input type="checkbox" name="" id="">
                </div>
                <div class="wares">
                    <div class="image">
                        <img src="./image/p1.jpg" alt="">
                    </div>
                    <div class="text">
                        <p>【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</p>
                    </div>
                </div>
                <div class="onePrice">￥<span>12.60</span></div>
                <div class="num">
                    <div class="reduce">-</div>
                    <input type="text" value="1" class="number">
                    <div class="plus">+</div>
                </div>
                <div class="subTotal">￥<span>12.60</span></div>
                <div class="operation">删除</div>
            </div>
            <div class="waresChoice">
                <div class="oneBtn">
                    <input type="checkbox" name="" id="">
                </div>
                <div class="wares">
                    <div class="image">
                        <img src="./image/p2.jpg" alt="">
                    </div>
                    <div class="text">
                        <p>【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽车</p>
                    </div>
                </div>
                <div class="onePrice">￥<span>24.80</span></div>
                <div class="num">
                    <div class="reduce">-</div>
                    <input type="text" value="1" class="number">
                    <div class="plus">+</div>
                </div>
                <div class="subTotal">￥<span>24.80</span></div>
                <div class="operation">删除</div>
            </div>
            <div class="waresChoice">
                <div class="oneBtn">
                    <input type="checkbox" name="" id="">
                </div>
                <div class="wares">
                    <div class="image">
                        <img src="./image/p3.jpg" alt="">
                    </div>
                    <div class="text">
                        <p>唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</p>
                    </div>
                </div>
                <div class="onePrice">￥<span>29.80</span></div>
                <div class="num">
                    <div class="reduce">-</div>
                    <input type="text" value="1" class="number">
                    <div class="plus">+</div>
                </div>
                <div class="subTotal">￥<span>29.80</span></div>
                <div class="operation">删除</div>
            </div>
        </div>
    </div>
    <!-- 商品结算部分 -->
    <div class="waresOver">
        <div class="banxin">
            <div class="boxOver">
                <div class="allBtn">
                    <input type="checkbox" name="" id="alltwo">
                    全选
                </div>
                <div class="operationWares">
                    删除选中的商品
                </div>
                <div class="emptyWares">清空购物车</div>
                <div class="xz">
                    已经选<span class="piece">0</span>件商品 总价: <span>￥</span><span class="sum">0.00</span>
                </div>
                <div class="jiesuan">
                    去结算
                </div>
            </div>
        </div>
    </div>
    <!-- 底部部分 -->
    <footer class="footer">
        <div class="banxin">
            <div class="mod_service">
                <ul>
                    <li>
                        <div class="service_txt">
                            <div class="one"></div>
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_txt">
                            <div class="two"></div>
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_txt">
                            <div class="three"></div>
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_txt">
                            <div class="four"></div>
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_txt">
                            <div class="five"></div>
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl class="one">
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt class="help">帮助中心</dt>
                    <dd class="rwm">
                        <img src="./image/erweima.png" alt="二维码"><br>
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="link">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </div>
                <div class="dizhi">
                    地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>


    <script src="./index.js"></script>
</body>

</html>